<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <xtx-bread>
        <xtx-bread-item to="/">首页</xtx-bread-item>
        <xtx-bread-item :to="`/category/${subObj.parentId}`">{{ subObj.parentName }}</xtx-bread-item>
        <xtx-bread-item>{{ subObj.name }}</xtx-bread-item>
      </xtx-bread>

      <!-- 筛选区 -->
      <div class="sub-filter">
        <!-- 品牌 -->
        <div class="item" v-for="item in subObj.saleProperties" :key="item.id">
          <div class="head">{{ item.name }}:</div>
          <div class="body">
            <a
              :class="{ active: i.flag }"
              href="javascript:;"
              @click="toggleFn(item.properties, i, item.name)"
              v-for="i in item.properties"
              :key="i.id"
            >{{ i.name }}</a>
          </div>
        </div>
      </div>

      <!-- 商品展示 -->
      <sub-sort :keyWord="keyWord"></sub-sort>
    </div>
  </div>
</template>

<script>
import SubSort from '../subCategory'

// 引入筛选数据接口
import { useFilterData } from './service/useFilterdata'
export default {
  name: 'SubCategory',
  components: {
    SubSort
  },
  setup () {
    const {
      subObj,
      toggleFn,
      keyWord
    } = useFilterData()
    return {
      subObj,
      toggleFn,
      keyWord
    }
  }
}
</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  margin-bottom: 30px;
  .item {
    display: flex;
    padding: 10px 0;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
